import * as echarts from 'echarts';
type seriesType = {
    name:string,
    type:string,
    label:Record<any,any>,
    barGap:number,
    emphasis:Record<any,any>,
    data:string[]|number[]
}

//数值水平展示还是翻转展示
type Rotate = {
    rotate:boolean 
}


const app:any = {};
export  const Dcharts = {
    drawCharts:function(dom:any,xAxis:string[]|number[],yAxis:Record<string,string[]|number[]>|string[]|number[],chartType:string="bar"){
        // this.Dconfig()
        //选项
        // debugger;
        let option = this.Doptions(xAxis,yAxis,chartType)
        let chartDom:any = document.getElementById(dom)
        let existInstance = echarts.getInstanceByDom(chartDom)
        if(existInstance) echarts.dispose(existInstance)
        let myChart = echarts.init(chartDom);
        option && myChart.setOption(option);


        window.addEventListener("resize", function () {
            myChart.resize();
        });
    },
    Doptions:function(xAxis:string[]|number[],yAxis:Record<string,string[]|number[]>|string[]|number[],chartType:string="bar"):any{
        let labelOption = {
            show: true,
            position: app.config?.position,
            align: app.config?.align,
            verticalAlign: app.config?.verticalAlign,
            distance: app.config?.distance,
            rotate: app.config?.rotate,
            formatter: '{c}  {name|{a}}',
            fontSize: 16,
            rich: {
                name: {
                }
            }
        };
        let dataName:any = [];
        let seriesArr = []
        let target :string[]|number[] | Record<string,string[]|number[]>
        if(yAxis instanceof Array){
            let obj = {} as seriesType
            target = yAxis 
            obj.type = chartType
            obj.label = labelOption
            obj.barGap = 0
            obj.emphasis = {focus: 'series'}
            obj.data = target
            obj.name = ""
            seriesArr.push(obj)
        }else{            
            dataName = Object.keys(yAxis)
            for(const key in  yAxis){
                let obj = {} as seriesType
                target = yAxis[key]
                obj.name = key
                obj.type = chartType
                obj.label = labelOption
                obj.barGap = 0
                obj.emphasis = {focus: 'series'}
                obj.data = target
                seriesArr.push(obj)
            }
        }
        console.log(seriesArr);
        
        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: dataName
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {show: false},
                    data: xAxis
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: seriesArr
        };
        return option
    },
    Dconfig:function(rotate:Rotate={rotate:false}){ 
        //如果是true，数据垂直90度
        if(rotate.rotate){
            app.config = {
                rotate: 90,
                align: 'left',
                verticalAlign: 'middle',
                position: 'insideBottom',
                distance: 15,
    
            };
        }else{
            app.config ={}
        }
    }
}

